<template>
    <div class="login" :style="'height:'+ fullHeight + 'px;'">
        <div class="loginDiv">
            <div class="loginLogo">
                <img src="../assets/logo.png" alt="">
                <span>餐厅管理系统</span>
            </div>
            <div class="loginUser">
                <span><i class="el-icon-user-solid"></i></span>
                <el-input
                        v-model="user"
                        placeholder="请输入用户名"
                        id="user"
                        suffix-icon="el-icon-user">
                </el-input>
            </div>
            <div class="loginUser">
                <span><i class="el-icon-warning"></i></span>
                <el-input
                        v-model="password"
                        placeholder="请输入密码"
                        id="password"
                        show-password >
                </el-input>
            </div>
            <div class="loginBtn">
                <el-button type="warning" size="medium" @click="login">登录</el-button>
                <el-button size="medium"  style="color: #409EFF" @click="reset">重置</el-button>
            </div>
            <div>
                <el-dialog
                        title="登录提示"
                        :visible.sync="centerDialogVisible"
                        width="30%"
                        center>
                    <span v-show="wrongMessage">你输入的账号或密码不能为空，请重新输入！</span>
                    <span v-show="!wrongMessage">你输入的账号或密码错误，请重新输入！</span>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="centerDialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
                    </span>
                </el-dialog>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapActions} from 'vuex'
    export default {
        name: "login",
        data(){
            return {
                user:'',
                password:'',
                centerDialogVisible: false,
                wrongMessage:true,
                fullHeight:document.documentElement.clientHeight
            }
        },
        watch:{
            fullHeight(val){
                if(!this.timer){
                    this.fullHeight = val
                    this.timer = true
                    let that = this
                    setTimeout(function () {
                        that.timer = false
                    },400)
                }
            }
        },
        mounted(){
            const that = this
            window.onresize = ()=>{
                return (()=>{
                    window.fullHeight = document.documentElement.clientHeight
                    that.fullHeight = window.fullHeight
                })()
            }
        },
        methods:{
            ...mapActions(['userLogin','userOperation']),
            login(){
                let obj = {
                    name:this.user,
                    password:this.password
                }
                let operation = {
                    userName:this.user,
                    operationDate:'',
                    operationMessage:'登录',
                }
                if(this.user !== '' && this.password !== ''){
                    this.userLogin(obj)
                        .then(resp=>{
                            operation.operationDate = this.$store.state.user.loginTime
                            if(resp.Code === 200 && resp.Power === 0){
                                this.$router.push('/front/index')
                                this.userOperation(operation)
                            }else if(resp.Code === 200 && resp.Power >= 1 ){
                                this.$router.push('/back/index')
                                this.userOperation(operation)
                            }else if(resp.Code === 400 || resp.Power === -1) {
                                this.centerDialogVisible = true
                                this.wrongMessage = false
                            }
                        })
                        .catch(err=>{
                            console.log(err)
                        })
                }else {
                   this.centerDialogVisible = true
                }
            },
            reset(){
                this.user = ''
                this.password = ''
            }
        },
        created() {


        }
    }
</script>

<style scoped lang="less">
    .login{
        width: 100%;
        background-image: url("../assets/bg.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        overflow: hidden;
        .loginDiv{
            width: 500px;
            height: 350px;
            margin: 120px auto;
            border: 5px solid rgba(255, 255, 255, 0.49);
            border-radius: 10px;
            overflow: hidden;
            background: rgba(255, 255, 255, 0.20);
            .loginUser{
                width: 500px;
                margin: 20px auto;
                height: 50px;
                line-height: 50px;
                overflow: hidden;
                span{
                    display: inline-block;
                    height: 40px;
                    width: 50px;
                    line-height: 40px;
                    text-align: center;
                    color: #244471;
                    font-weight: bold;
                    font-size: 30px;
                    margin-top: 5px;
                    margin-left: 70px;
                    float: left;
                }
                .el-input{
                    display: inline-block;
                    height: 40px;
                    width: 300px;
                    line-height: 40px;
                    margin-left: 10px;
                    margin-top: 5px;
                    float: left;
                }
            }
            .loginBtn{
                width: 500px;
                height: 50px;
                line-height: 50px;
                margin-top: 20px;
                text-align: center;
                .el-button:nth-child(1){
                    margin-left: 70px;
                }
                .el-button:nth-child(2){
                    margin-left: 50px;
                }

            }
            .loginLogo{
                width: 400px;
                height: 50px;
                line-height: 50px;
                text-align: center;
                margin: 20px auto;
                padding: 15px;
                border-bottom: 2px solid #ffd04b;
                img{
                    width: 180px;
                    height: 50px;
                }
                span{
                    display: inline-block;
                    font-size: 20px;
                    font-weight: bolder;
                    color: #244471;
                    margin-left: 15px;
                }
            }
            .el-dialog{
                span{
                    display: inline-block;
                    width: 100%;
                    text-align: center;
                }
            }
        }

    }

</style>